<template>
  <div id="islogin" class="nav-bar-item right">
    <div class="imgbox ">
      <label for="AddImg">
        <span class="imgspan">
           <img :src="picsrc" alt="" class="myimg">
           <input type="file" class="userimg" @change="commit" name="AddImg" id="imgsrc">
     </span>
      </label>
      </div>
    <Button type="primary" class="puple" @click="adddemand"><span>发布需求</span></Button>
    <Button type="primary" class="black" @click="message"><span>消息</span></Button>
    <Button type="primary" class="red" @click="remove"><span>退出登录</span></Button>
  </div>
</template>
<script>
import {changePortrait} from 'api/user.js'
export default {
  name:'IsLogin',
  data(){
    return {
      picsrc:''
    }
  },
  methods:{
    commit(){
      let data=new FormData();
      let input=document.getElementById('imgsrc');
      data.append('file',input.files[0]);
      data.append('userId',sessionStorage.getItem('id'));
      let config1={
        cache:false,
        processData:false,
        contentType:false,
        headers:{
          'Content-Type':'multipart/form-data'
        }
      }
      changePortrait('/api/user/changePortrait',data,config1)
      .then(res=>{
        this.picsrc='http://120.77.241.190:9999/' + res.data;
        sessionStorage.portrait=res.data;
        this.$Notice.success({
        title:'头像上传成功',
        duration:5})
      })
      .catch(err=>{
        this.$Notice.error({
        title:'头像上传失败',
        duration:5})
      })
    },
    adddemand(){
      this.$emit('newdemand',true);
      let body=document.querySelector('body');
      body.setAttribute('style','overflow:hidden;')
    },
    remove(){
      sessionStorage.removeItem('portrait');
      sessionStorage.removeItem('username');
      sessionStorage.removeItem('mytoken');
      sessionStorage.removeItem('id');
      sessionStorage.removeItem('phone');
      this.$emit('quit');
    },
    message(){
      this.$router.push('/message');
    }
  },
    mounted(){
      let portrait=sessionStorage.getItem('portrait');
      if(portrait!=0){
        this.picsrc='http://120.77.241.190:9999/' + portrait;
      }else{
        this.picsrc=require('@/assets/images/user.png');
      }
    }
}
</script>
<style>
#islogin{
  display: flex;
  height: 100%;
  width: 400px;
  justify-content: space-between;
  align-items: center;
  margin-right: 16%;
  background-color: #000;
  vertical-align: auto;
}
#islogin img{
  width: 50px;
  height: 50px;
  border-radius: 50%;
  vertical-align: middle;
}
#islogin .puple,
#islogin .puple:hover
{
  color: #fff;
  background-color: rgb(140, 48, 245);
  border-color: rgb(140, 48, 245);
}
#islogin .black,
#islogin .black:hover
{
  color: #fff;
  background-color: #000;
  border-color: #000;
}
#islogin .red,
#islogin .red:hover
{
  color: #000;
  background-color: red;
  border-color: red;
}
#islogin .imgspan{
  position: relative;
  top: 0;
  left: 0;
}
#islogin .userimg{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}
#islogin .userimg,
#islogin .myimg{
  width: 40px;
  height: 40px;
  font-size: 14px;
}
#islogin span{
  font-size: 18px;
}
</style>